<template>
  <div class="p-3 flex">
    <Echart
      :loading="!sexpieoption"
      :option="sexpieoption"
      :events="[
        ['legendselectchanged',e=>{
          const { selected,name } = e
          $log((selected[name]?'显示':'隐藏')+name)
        }]
      ]"
      :style="{height:titleHeight,width:titleHeight}"
    />
    <Echart
      :loading="!agebaroptions"
      :option="agebaroptions"
      :style="{height:titleHeight,width:titleHeight}"
    />
  </div>
</template>

<script lang="ts" setup >
import { reactive,readonly,h } from 'vue'
import { createComponent } from 'echarts-for-vue';
import { sexpieoption,agebaroptions } from '../static/userproperty'
import * as echarts from 'echarts'

const titleHeight = '300px'
const Echart = createComponent({echarts,h})

</script>


<style lang="scss" scoped>
</style>